<extend name="layout/main" />

<block name="HEADER">
	<script type="text/javascript" src="__PUBLIC__/lib/echarts.min.js"></script>
	<style>
		.layuiadmin-card-list {
			padding: 7px 10px;
		}

		.layuiadmin-card-list p.layuiadmin-big-font {
			font-size: 30px;
			color: #da312c;
		}

		.layadmin-backlog .layadmin-backlog-body {
			padding: 10px 7px;
		}

		.layadmin-backlog-body p cite {
			font-size: 24px;
		}



		.means-img {
			width: 100%;
			height: 120px;
			display: block !important;
		}

		.means-list {
			padding: 5px;
			overflow: hidden;
		}

		.means-list li {
			text-align: left;
			font-size: 12px;
		}

		.means-evaluate-list {
			border-top: 1px solid #efefef;
			padding: 5px 0;
			overflow: hidden;
		}

		.means-evaluate-list li {
			font-size: 12px;
			width: 25%;
			line-height: 20px;
			float: left;
			text-align: center;
		}


		/*联系方式*/
		.contact {
			height: 50px;
			line-height: 40px;
			padding: 5px 10px;
		}

		.contact span {
			padding: 0 10px;
		}

		.contact em {
			font-weight: bold;
		}


		/*数据预览*/
		.myChart {
			height: 90%;
			margin-bottom: 10px;
			position: relative;
		}

		.layuiadmin-btn-group .active {
			background: #2ec7c9;
			color: white !important;
			border: 1px solid #2ec7c9;
		}

		.wrapper-title {
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			background-color: #ccc;
		}

		.row-title {
			background-color: #eee;
		}

		.table-info{
			border-left: 1px solid #ddd;
		}
		.table-info td {
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			padding: 10px;
		}

		.table-info .info{
			text-align: center;
			width: 15%;
		}

		.set-form{
			padding: 20px;
		}
		.set-table td{
			padding: 10px;
			text-align: center;
		}

		.hidden {
			visibility: hidden;
		}
	</style>
</block>

<block name="CONTENT">
	<div class="wrapper">
		<div class="panel-heading">
			<control:search id="searchs" />
		</div>
		<div class="content" id="app">
			<div class="wrapper-title row-title">
				数据
			</div>
			<div class="layui-row" style="height: 480px;">
				<div class="layui-col-md6 layui-col-sm12 " style="height: 100%;">
					<div class="wrapper-title">男客户年龄分析</div>
					<div id="male-chart" class="myChart"></div>
				</div>
				<div class="layui-col-md6 layui-col-sm12" style="height: 100%;">
					<div class="wrapper-title">女客户年龄分析</div>
					<div id="female-chart" class="myChart"></div>
				</div>
			</div>
			<!-- <div class="layui-row">
				<div class="layui-col-md6 layui-col-sm12 " style="height: 100%;">
					<div class="wrapper-title">男客户忠诚度指标</div>
					<table class="table-info male-target">
						<tr v-for="(item, name) in maleTarget" :key="name">
							<td>{{ name | nameFilter }}</td>
							<td class="info" v-for="(child, index) in item">{{child}}</td>
						</tr>
					</table>
				</div>
				<div class="layui-col-md6 layui-col-sm12" style="height: 100%;">
					<div class="wrapper-title">女客户忠诚度指标</div>
					<table class="table-info female-target">
						<tr v-for="(item, name) in maleTarget" :key="name">
							<td>{{ name | nameFilter }}</td>
							<td class="info" v-for="(child, index) in item">{{child}}</td>
						</tr>
					</table>
				</div>
			</div> -->
		</div>

	</div>
</block>

<block name="FOOTER">
	<script id="targetSet" type="text/html">
		<form class="layui-form set-form" lay-filter="set-form">
			<table class="set-table">
				<tr>
					<td class="f-orage">1</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="1-1" datatype="*"></td>
					<td>至</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="1-2" datatype="*"></td>
				</tr>
				<tr>
					<td class="f-orage">2</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="2-1" datatype="*"></td>
					<td>至</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="2-2" datatype="*"></td>
				</tr>
				<tr>
					<td class="f-orage">3</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="3-1" datatype="*"></td>
					<td>至</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="3-2" datatype="*"></td>
				</tr>
				<tr>
					<td class="f-orage">4</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="4-1" datatype="*"></td>
					<td>至</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="4-2" datatype="*"></td>
				</tr>
				<tr>
					<td class="f-orage">5</td>
					<td><input  type="number" placeholder="客户年龄" class="layui-input" name="5-1" datatype="*"></td>
					<td>至</td>
					<td><input  type="number" placeholder="以上" class="layui-input" name="5-2" ></td>
				</tr>
			</table>
		</form>
	</script>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var page = (function (ns) {
			var formData = {}
			var app = new Vue({
				el: '#app',
				data: {

				}
			})

			//搜索事件
			ns.query = function () {
				var data = searchs.getData()
				var params = {}
				console.log(data)
				data.forEach(function (item) {
					if( item.type == 'date' ){
						if( params[item.field] != undefined ){
							params[item.field] += (' - ' + item.value)
						}else{
							params[item.field] = item.value
						}
					}else{
						params[item.field] = item.value
					}
					// date
				})
				console.log(params)
				$.ajaxs('/admin/v2/user_analysis/index', params).then(function (res) {
					console.log(res)
					var xArr = res.data.x
					var yArr1= res.data.y1
					var yArr2 = res.data.y2
					ns.loadChartBar1(xArr, yArr1)
					ns.loadChartBar2(xArr, yArr2)
				})

				$.ajaxs('/admin/v2/user_analysis/getAge', params).then(function (res) {
					console.log(res)
					var data = []
					var _data = {}
					if( res.data ){
						data = res.data.split(',')
					}
					for( var i = 0; i < data.length; i++ ){
						let num = i + 1
						var item = data[i].split('~')
						_data[num + '-1'] = item[0]
						_data[num + '-2'] = item[1]
					}

					formData = _data
					
				})
			}

			ns.edit = function(){
				var htmlStr = template("targetSet",successFn, yesFn, {})
				function successFn(){
					layui.form.render();	//可以忽略
					layui.form.val('set-form', formData)
				}
				function yesFn () {
					var data = $(".set-form").serializeJson();
					$(".set-form").validformIn(function(data){ 
						console.log(data)
						var _data = []
						var num = 0
						var _num = 0
						var lastitem = 0
						for( var obj in data ){
							num++
							if(data[obj] && data[obj] - lastitem < 0 ){
								$.toast(0 , '后一数值不可小于前一数值')
								return
							}else{
								lastitem = data[obj]
							}

							if( num%2 != 0 ){ 
								_num++
								if( data[_num+'-2'] != 0 ){
									str = data[_num+'-1'] + '~' + data[_num+'-2']
								}else{
									str = data[_num+'-1']
								}
								_data.push(str)
							}
						}
						var params = {}
						var filterData = searchs.getData()
						params['shop_id'] = filterData[0].value
						params['data'] = _data.join(',')
						console.log(params)

						$.ajaxs('/admin/v2/user_analysis/setAge', params).then(function (res) {
							ns.query();
							layer.closeAll();
						})
					});				
				}

				$.openModalDialog(htmlStr, "设置客户年龄段",successFn, yesFn, ['500px', '380px']);
		    }
			

			ns.toProgramme = function(){
				var filter={ url:"/modules/analysis/programme/index", mode:2}	
				$.openFullWin(filter, '')
			}

			ns.loadChartBar1 = function (xArr, yArr) {
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						bottom: '0%',
						itemGap: 20,
						data: ['消费人数(人)', '消费金额(元)']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: xArr,

					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					barWidth: '25%',
					barGap: '0%',	
					series: [
						{
							name: '消费人数(人)',
							type: 'bar',
							data: yArr.number,
							itemStyle: {
								color: '#38A0FF'
							},
						},
						{
							name: '消费金额(元) ',
							type: 'bar',
							data: yArr.money,
							itemStyle: {
								color: '#4CCA73'
							}
						}
					]
				};
				echarts.init( document.getElementById("male-chart") ).setOption(option, true);
			}

			ns.loadChartBar2 = function (xArr, yArr) {
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						bottom: '0%',
						itemGap: 20,
						data: ['消费人数(人)', '消费金额(元) ']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: xArr,
						
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					barWidth: '25%',
					barGap: '0%',	
					series: [
						{
							name: '消费人数(人)',
							type: 'bar',
							data: yArr.number,
							itemStyle: {
								color: '#38A0FF'
							},
						},
						{
							name: '消费金额(元) ',
							type: 'bar',
							data: yArr.money,
							itemStyle: {
								color: '#4CCA73'
							}
						}
					]
				};
				echarts.init( document.getElementById("female-chart") ).setOption(option, true);
			}	
			

			//页面初始化
			ns.init = function () {
				searchs.clickQuery();
			}

			return ns;
		}({}));


		$(function () { page.init(); });

	</script>
</block>